<template>
	<div style="padding-left: 0.1rem;padding-right: 0.1rem; height: 100%;">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-row :gutter="5">
					<el-col :span="8">
						<h3 style="padding-top: 0.3125rem;">现场挂号信息总览</h3>
					</el-col>
				</el-row>
			</div>
			<el-form label-position="right" :rules="rules" :model="patientRegister" ref="patientRegister" width="80px"
				class="demo-ruleForm">
				<el-row :gutter="20">
					<el-col :span="5">
						<el-form-item label="发票号:">
							<el-input readonly="true" v-model="inno"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4" :offset="15">
						<el-form-item>
							<el-button type="primary" @click="submitForm('patientRegister')">添加患者</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<div>
						<div>
							<el-row :gutter="20">
								<el-col :span="24">
									<h4 style="text-align: left;padding-left: 20px;">
										患者基本信息：
									</h4>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="5" :offset="2">
									<el-form-item label="病历号:">
										<el-input readonly="true" v-model="patientRegister.medicalRecordId"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="patientName" label="姓名:">
										<el-input v-model="patientRegister.patientName"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="patientSex" label="性别:">
										<el-select v-model="patientRegister.patientSex" placeholder="请选择">
											<el-option v-for="item in options1" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>

									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="patientAge" label="年龄:">
										<el-input v-model="patientRegister.patientAge"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="7" :offset="2">
									<el-form-item prop="patientCredit" label="身份证号:">
										<el-input v-model="patientRegister.patientCredit"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="homeAddress" label="住址:">
										<el-input v-model="patientRegister.homeAddress"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
						<el-divider></el-divider>
						<div>
							<el-row :gutter="20">
								<el-col :span="24">
									<h4 style="text-align: left;padding-left: 20px;">
										就诊信息：
									</h4>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="5" :offset="2">
									<el-form-item prop="dignoseTime" label="请选择科室:">
										<el-select v-model="patientRegister.departmentId" clearable placeholder="请选择"
											@change="gettwoSelect">
											<el-option v-for="item in select1" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="dignoseTime" label="请选择医生:">
										<el-select v-model="patientRegister.doctorId" filterable placeholder="请输入查询内容">
											<el-option v-for="item in select2" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="dignoseTime" label="看诊日期:">
										<el-date-picker v-model="patientRegister.dignoseTime" type="date"
											placeholder="选择日期">
										</el-date-picker>
									</el-form-item>
								</el-col>

							</el-row>
							<el-row :gutter="20">
								<el-col :span="5" :offset="2">
									<el-form-item prop="registerType" label="挂号类型:">
										<el-select v-model="patientRegister.registerType" placeholder="请选择">
											<el-option v-for="item in options2" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item prop="registerState" label="挂号状态:">
										<el-input v-model="patientRegister.registerState"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-row>

			</el-form>
		</el-card>

		<el-dialog title="患者挂号信息" center width="50%" :visible.sync="dialogTableVisible">
			<el-form label-position="right" class="demo-table-expand">
				<el-form-item label="病历号:">
					<span>{{ patientRegister.medicalRecordId }}</span>
				</el-form-item>
				<el-form-item label="患者姓名:">
					<span>{{ patientRegister.patientName }}</span>
				</el-form-item>
				<el-form-item label="患者年龄:">
					<span>{{ patientRegister.patientAge }}</span>
				</el-form-item>
				<el-form-item label="患者性别:">
					<span>{{ patientRegister.patientSex }}</span>
				</el-form-item>
				<el-form-item label="身份证号:">
					<span>{{ patientRegister.patientCredit }}</span>
				</el-form-item>
				<el-form-item label="家庭住址:">
					<span>{{ patientRegister.registerState }}</span>
				</el-form-item>
				<el-form-item label="发票号:">
					<span>{{ inno }}</span>
				</el-form-item>
				<el-form-item label="挂号科室:">
					<span>{{ patientRegister.departmentId }}</span>
				</el-form-item>
				<el-form-item label="挂号医生:">
					<span>{{ patientRegister.doctorId }}</span>
				</el-form-item>
				<el-form-item label="挂号类型:">
					<span>{{ patientRegister.registerType }}</span>
				</el-form-item>
				<el-form-item label="挂号状态:">
					<span>{{ patientRegister.registerState }}</span>
				</el-form-item>
				<el-form-item label="就诊时间:">
					<span>{{ patientRegister.dignoseTime }}</span>
				</el-form-item>
				<div style="text-align: center;">
					<el-button @click="dialogTableVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitPatientDate()">确定并提交</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				//需要改 方法 一级选择 二级选择中的 this.ljxzq
				IDsum: {
					departmentId: '',
					departmentName: '',
					doctors: {
						doctorId: '',
						doctorName: '',
					}
				},
				//修改之后 ljxzq可以删去
				ljxzq: [{
					departmentId: 1,
					departmentName: "外科",
					doctors: [{
						doctorId: 1,
						doctorName: "杨医生"
					}, {
						doctorId: 2,
						doctorName: "王医生"
					}]
				}, {
					departmentId: 2,
					departmentName: "内科",
					doctors: [{
						doctorId: 1,
						doctorName: "杨医生"
					}]
				}, {
					departmentId: 3,
					departmentName: "神经科",
					doctors: [{
						doctorId: 1,
						doctorName: "杨医生"
					}]
				}, {
					departmentId: 4,
					departmentName: "皮肤科",
					doctors: [{
						doctorId: 1,
						doctorName: "杨医生"
					}]
				}, {
					departmentId: 5,
					departmentName: "神经内科",
					doctors: [{
						doctorId: 1,
						doctorName: "杨医生"
					}]
				}],
				select1: [],
				select2: [],



				//表单发送的数据
				inno: '',
				patientRegister: {
					patientName: '', //患者姓名
					patientAge: '', //患者年龄
					patientSex: '', //患者性别
					medicalRecordId: '', // 病历号
					patientCredit: '', //  身份证
					homeAddress: '', //  家庭住址
					departmentId: '', // 科室
					doctorId: '', //挂号医生
					registerType: '', // 挂号类型
					registerState: '', // 挂号状态
					dignoseTime: '', // 就诊时间					
				},
				rules: {
					patientName: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					patientSex: [{
						required: true,
						message: '请输入性别',
						trigger: 'blur'
					}],
					patientAge: [{
						required: true,
						message: '请输入年龄',
						trigger: 'blur'
					}],
					patientCredit: [{
							required: true,
							message: '请输入身份证号',
							trigger: 'blur'
						},
						{
							min: 18,
							max: 18,
							message: '长度为18个字符',
							trigger: 'blur'
						}
					],
					homeAddress: [{
						required: true,
						message: '请输入家庭住址',
						trigger: 'blur'
					}],
					departmentId: [{
						required: true,
						message: '请选择科室名',
						trigger: 'blur'
					}],
					doctorId: [{
						required: true,
						message: '请选择医生',
						trigger: 'blur'
					}],
					registerType: [{
						required: true,
						message: '请选择挂号类型',
						trigger: 'blur'
					}],
					registerState: [{
						required: true,
						message: '请确认挂号状态',
						trigger: 'blur'
					}],
					dignoseTime: [{
						required: true,
						message: '请选择挂号时间',
						trigger: 'blur'
					}]
				},

				//页面需要使用的数据
				dialogTableVisible: false,
				options1: [{
					value: '1',
					label: '男'
				}, {
					value: '0',
					label: '女'
				}],
				options2: [{
					value: '专家号',
					label: '专家号'
				}, {
					value: '普通号',
					label: '普通号'
				}],

			}
		},
		created() {
			// 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
			this.inno = this.getProjectNum() + Math.floor(Math.random() *
				10000)
			this.patientRegister.medicalRecordId = this.getProjectNum() + Math.floor(Math.random() *
				100) // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
		},
		mounted: function() {
			this.getoneSelect();
			this.$axio({
				method: "get",
				url: "/department",
			}).then((result) => {
				//console.log(result.data);
				this.IDsum = result.data
			}).catch((err) => {
				//console.log(err);
			});
		},
		methods: {
			//一级选择 选择科室
			getoneSelect() {
				let roles = [];
				for (var val of this.ljxzq) {
					//console.log(val)
					roles.push({
						label: val.departmentName,
						value: val.departmentId
					})
				}
				this.select1 = roles;
				//console.log(roles)
			},
			//二级选择 选择科室
			gettwoSelect() {
				this.patientRegister.doctorId = '';
				let roles = [];
				for (var val of this.ljxzq) {
					if (val.departmentId === this.patientRegister.departmentId) {
						//console.log(val.departmentId)
						//console.log(this.filters.value1)
						for (var vall of val.doctors) {
							console.log(vall.doctorName)
							roles.push({
								label: vall.doctorName,
								value: vall.doctorId
							})
						}
						this.select2 = roles;
					}
				}
			},
			submitForm(formName) {
				//console.log(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dialogTableVisible = true
					} else {
						console.log('error submit!!');
						return false;
					}
				})
				//this.dialogTableVisible = true
			},


			//向服务器提交表单数据
			submitPatientDate() {
				//所有的相关数据在patientRegister中
				let postdata = this.$qs.stringify(this.patientRegister)
				this.$axios({
					method: "post",
					url: "/patientRegister",
					data: postdata,
				}).then((res) => {
					console.log(res.data)
				}).catch((err) => {
					console.log(err);
				})
				this.dialogTableVisible = false
			},
			// 获取当前日期的方法
			getProjectNum() {
				const projectTime = new Date() // 当前中国标准时间
				const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
				const Month = projectTime.getMonth() + 1 // 获取中国区月份
				const Day = projectTime.getDate() // 获取几号
				var CurrentDate = Year
				if (Month >= 10) {
					// 判断月份和几号是否大于10或者小于10
					CurrentDate += Month
				} else {
					CurrentDate += '0' + Month
				}
				if (Day >= 10) {
					CurrentDate += Day
				} else {
					CurrentDate += '0' + Day
				}
				return CurrentDate
			}
		}
	}
</script>

<style>
</style>
